
<template>
  <div id="echartsMain" style="width: 500px; height: 500px" />

</template>
<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
export default {
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    data: function() {
      const list = this.$props.list
      return list
    }
  },

  mounted() {
    this.initEarcht()
  },

  methods: {
    async initEarcht() {
      const list = await this.getConfig()
      const baseY = 200
      const stepY = 50
      const chart = echarts.init(document.getElementById('echartsMain'))
      // j 是 2,5,8,11... 的step
      // k 是 1,4,7,10,... 的step
      let j = 0; let k = 0
      let x
      let mindNum = 300
      const mindNode = [1, 2, 4, 5, 7, 8, 10, 11, 13, 14, 16, 17]
      const yMap = {
        100: [0, 1],
        200: [2],
        300: [3, 4],
        400: [5],
        500: [6, 7],
        600: [8],
        700: [9, 10],
        800: [11]
      }

      const mindYMap = {
        2: baseY, 4: baseY,
        7: baseY * 2, 9: baseY * 2,
        12: baseY * 3, 14: baseY * 3,
        17: baseY * 4, 19: baseY * 4,
        22: baseY * 5, 24: baseY * 5,
        27: baseY * 6, 29: baseY * 6,
        32: baseY * 7, 34: baseY * 7,
        36: baseY * 8, 39: baseY * 8,
        42: baseY * 9, 44: baseY * 9,
        47: baseY * 10, 49: baseY * 10,
        52: baseY * 11, 54: baseY * 11
      }
      const echartData = list.reduce((pre, cur, index) => {
        if (index % 3 === 0) x = 100
        if (2 + j * 3 === index) {
          j++
          x = 200
        }
        if (1 + k * 3 === index) {
          k++
          x = 300
        }
        let find = 0
        Object.entries(yMap).forEach(([key, value]) => {
          const f = value.includes(index)
          if (f) find = key
        })
        pre.push({
          name: cur.approvalNode,
          x: x,
          y: find
        })
        // 中间的连接点。mind
        if (mindNode.includes(index) && index !== list.length - 1) {
          pre.push({
            name: 'mind' + index,
            x: mindNum,
            y: mindYMap[index],
            symbolSize: 0, label: { show: false }
          })
          mindNum = mindNum === 300 ? 100 : 300
        }
        return pre
      }, []).map((item, index) => {
        if (item.name.startsWith('mind')) {
          item.y = mindYMap[index]
        }
        return item
      })

      const links = this.createNode(echartData)
      console.log(echartData, '--', links)

      const option = {

        tooltip: {},
        series: [
          {
            type: 'graph',
            layout: 'none', // 力导向布局，也可以用 'none' 自定义坐标
            roam: true,
            label: {
              show: true,
              textStyle: {
                fontSize: 10 // 节点文本字体大小
              }
            },
            force: {
              repulsion: 1000,
              edgeLength: [50, 100]
            },
            edgeSymbol: ['none', 'arrow'],
            symbolSize: 50,

            data: echartData,
            // data: [{ 'name': '预审', 'x': 100, 'y': 100 }, { 'name': '风控审核', 'x': 300, 'y': 100 }, { 'name': 'mind', 'x': 300, 'y': 200 }, { 'name': '财务审核', 'x': 200, 'y': 200 }, { 'name': 'mind', 'x': 100, 'y': 200 }, { 'name': '其他审核', 'x': 100, 'y': 300 }],
            // links: links,
            links,
            lineStyle: {
              color: '#aaa',
              opacity: 0.9,
              width: 2,
              curveness: 0
            }
          }
        ]
      }

      chart.setOption(option)
    },
    async getConfig() {
      const data = await request({ url: 'system/approveConfig/list', method: 'get' })
      const l = data.data.map(item => ({ ...item, name: item.approvalNode + '1' }))
      return [...data.data]
    },
    createNode(nodes) {
      const links = []
      for (let i = 0; i < nodes.length - 1; i++) {
        links.push({
          source: nodes[i].name,
          target: nodes[i + 1].name
        })
      }
      return links
    }
  }
}
</script>
